<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<style>
.table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
	background-color: #FFF;
}
</style>
<div class="wrapper wrapper-content animated fadeInRight"
	style="height: 100%">
	<div class="ibox float-e-margins">
		<div class="ibox-content">
			<div th:include="toolbar :: toolbar-operate"></div>
			<div class="table-responsive" style="margin-top: 20px;">
				<form role="form" class="form-inline" action="/menu/list">
					<table th:id="@{admin_menu{menuId}_datagrid(menuId=${OP.menuId})}"
						class="table table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th><input type="checkbox" onclick="$('.ii-checks').prop('checked',($(this).prop('checked') ? true : false ))" name="input[]"/></th>
								<th>名称</th>
								<th>目录</th>
								<th>图标</th>
								<th>是否启用</th>
								<th>添加时间</th>
								<th>修改时间</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="tree : ${page?.list}" th:class="${'treegrid-' + tree.id }" th:classappend="${tree.paterId != null ? 'treegrid-parent-' + tree.paterId : ''}"> 
								<td><input type="checkbox" class="ii-checks" name="check" th:value="${tree.id}"/></td>
								<td th:text="${tree?.name}">name</td>
								<td th:text="${tree?.channel}">channel</td>
								<td><i th:class="${tree?.icon}" th:classappend="text-navy"></i></td>
								<td><i th:class="${tree.locked} ? 'fa fa-check text-navy' : 'fa fa-close text-danger'"></i></td>
								<td th:text="${#dates.format(tree?.gmtCreate, 'yyyy-MM-dd HH:mm:ss')}"></td>
								<td th:text="${#dates.format(tree?.gmtModified, 'yyyy-MM-dd HH:mm:ss')}"></td>
							</tr>
						</tbody>
					</table>
					<div class="fixed-table-pagination"
						style="display: block; margin-top: -50px;">
						<div class="pull-left pagination-detail">
							<span class="pagination-info">显示第 <font th:text="${page.pageNum}"></font> 到第
								<font th:text="${page.pageNum * page.pageSize}"></font> 条记录，总共 <font th:text="${page.total}"></font> 条记录</span> <div
								class="page-list">每页显示<span class="btn-group dropup">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
										<span class="page-size"><font th:text="${page.pageSize}"></font></span> <span
											class="caret"></span>
									</button>
									<ul class="dropdown-menu" role="menu" id="resources_meny">
										<li><a href="javascript:void(0)">5</a></li>
										<li><a href="javascript:void(0)">10</a></li>
										<li><a href="javascript:void(0)">30</a></li>
										<li><a href="javascript:void(0)">50</a></li>
									</ul>
							</span> 条记录
							</div>
						</div>
						<div
							th:class="${page.pageSize &gt;= page.total ? 'hidden' : 'pull-right pagination'}">
							<ul class="pagination">
								<li th:class="${page.isFirstPage ? 'disabled' : 'page-first'}"
									th:onclick="'javascript:loadResources(0)'">
									<a href="javascript:void(0)">«</a>
								</li>
								<li class="page-pre ${page.isFirstPage ? 'disabled' : null}"
									th:onclick="'javascript:loadResources('+${page.pageNum - 1}+');'">
									<a href="javascript:void(0)">‹</a>
								</li>
								<li th:each="k : ${#numbers.sequence(1,page.pages)}" class="page-number" th:classappend="${page.pageNum == k } ? 'active'"
										th:onclick="'javascript:loadResources('+${k}+');'">
									<a href="javascript:void(0)" th:text="${k}"></a>
								</li>
								<li class="page-next ${page.isLastPage ? 'disabled' : null}"
									th:onclick="'javascript:loadResources('+${page.pageNum + 1}+');'">
									<a href="javascript:void(0)">›</a></li>
								<li class="page-last ${page.isLastPage ? 'disabled' : null}"
									th:onclick="'javascript:loadResources('+${page.navigateLastPage}+');'">
									<a href="javascript:void(0)">»</a></li>
							</ul>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/
	$(function(){
		battcn.ns('battcn.admin.menu[[${OP.menuId}]]');
		$('#admin_menu[[${OP.menuId}]]_datagrid').treegrid({
				  expanderExpandedClass: 'glyphicon glyphicon-minus',
	            expanderCollapsedClass: 'glyphicon glyphicon-plus'
		});
	}) 
	$("#resources_meny>li").click(function(){
		battcn.reloadDiv("op_list_[[${OP.menuId}]]?pageSize="+$(this).text());
	});
	function loadResources(pageNum){
		var pageSize = $('button.dropdown-toggle').find("font").text();
		battcn.reloadDiv("op_list_[[${OP.menuId}]]?pageNum="+pageNum+"&pageSize="+pageSize);
	}
	//删除
	battcn.admin.menu[[${OP.menuId}]].remove = function(){
		var cbox = [];
		$("input[name='check']").each(function(){
		    if(true == $(this).is(':checked'))cbox.push($(this).val());
		});
		if (cbox == "" || cbox.length==0) {
			battcn.toastrsAlert({
			     code:'info',
			     msg:'请选择你要删除的记录'
			});
			return;
		}
		battcn.confirm(function(){
	    	battcn.ajaxJson({url:'/op_remove_[[${OP.menuId}]]',data:{"ids":cbox.join(",")}},function(){
	    		$('#admin_menu[[${OP.menuId}]]_datagrid').bootstrapTable('refresh');
	    	});
		});
		battcn.confirm(function(){
	    	battcn.ajaxJson({url:'/op_remove_[[${OP.menuId}]]',data:{"ids":cbox.join(",")}},function(){
	    		battcn.reloadDiv('/op_list_[[${OP.menuId}]]');
	    	});
		});
	};
	
	battcn.admin.menu[[${OP.menuId}]].add = function(){
		battcn.showWindow({
				title:'增加菜单',
				href:'op_edit_[[${OP.menuId}]]',
				width : '50%',
				height : '70%',
				okhandler:function(){
					battcn.admin.menu[[${OP.menuId}]].save();
				},
				cancelhandler:function(){
					battcn.closeWindow();
				}
			});
	}
	
	battcn.admin.menu[[${OP.menuId}]].edit = function(){
		var cbox = [];
		$("input[name='check']").each(function(){
		    if(true == $(this).is(':checked'))cbox.push($(this).val());
		});
		if (cbox == "") {
			layer.msg("请选择编辑项！！");
			return;
		}
		if (cbox.length > 1) {
			layer.msg("只能选中一个");
			return;
		}
		battcn.showWindow({
			title : '编辑菜单',
			href:'op_edit_[[${OP.menuId}]]?id=' + cbox,
			width : '50%',
			height : '70%',
			okhandler:function(){
				battcn.admin.menu[[${OP.menuId}]].save();
			},
			cancelhandler:function(){
				battcn.closeWindow();
			}
		});
	} 
	/*]]>*/
</script>
</html>